import React, { Component } from 'react';
import { Link } from 'react-router-dom';
// import Score from '@/components/kind/child/Score';
// require('./../mock')

class Com extends Component {
  constructor(props) {
    super(props);
    this.state={
      fname:'',
      dat:''
    }
  }
  componentDidMount () {
    let fname = JSON.parse(localStorage.getItem('f_name'))
    this.setState({
      fname:fname
    })
  }

  list1 () {
    let family = this.refs.family.innerHTML
    localStorage.setItem('f_name', JSON.stringify(family))
    this.props.history.go()
  }
  list2 () {
    let kuai = this.refs.kuai.innerHTML
    localStorage.setItem('f_name', JSON.stringify(kuai))
    this.props.history.go()
  }
  list3 () {
    let zao = this.refs.zao.innerHTML
    localStorage.setItem('f_name', JSON.stringify(zao))
    this.props.history.go()
  }
  list4 () {
    let f_name = this.refs.zao.innerHTML
    localStorage.setItem('f_name', JSON.stringify(f_name))
    this.props.history.go()
  }
  list5 () {
    let f_name = this.refs.yu.innerHTML
    localStorage.setItem('f_name', JSON.stringify(f_name))
    this.props.history.go()
  }
  list6 () {
    let f_name = this.refs.age.innerHTML
    localStorage.setItem('f_name', JSON.stringify(f_name))
    this.props.history.go()
  }
  list7 () {
    let f_name = this.refs.tang.innerHTML
    localStorage.setItem('f_name', JSON.stringify(f_name))
    this.props.history.go()
  }
  list8 () {
    let f_name = this.refs.hong.innerHTML
    localStorage.setItem('f_name', JSON.stringify(f_name))
    this.props.history.go()
  }
  list9 () {
    let f_name = this.refs.zhu.innerHTML
    localStorage.setItem('f_name', JSON.stringify(f_name))
    this.props.history.go()
  }
  list10 () {
    let f_name = this.refs.mian.innerHTML
    localStorage.setItem('f_name', JSON.stringify(f_name))
    this.props.history.go()
  }
  list11 () {
    let f_name = this.refs.su.innerHTML
    localStorage.setItem('f_name', JSON.stringify(f_name))
    this.props.history.go()
  }
  render() {
    return (
      <div>
          <div className="Kind_Choice">
            <span><Link to={{pathname:"/home"}}>首页</Link></span><p>></p><span><Link to={{pathname:"/kind"}}>全部分类</Link></span><p>></p><h3>{this.state.fname}</h3>
          </div> 
          <div className="Kind_nav"> 
          {/* 左上 选择 */}
          <ul className="navv">
            <li onClick={this.list1.bind(this)} ref="family">家常菜</li>
            <li onClick={this.list2.bind(this)} ref="kuai">快手菜</li>
            <li onClick={this.list3.bind(this)} ref="xai">下饭菜</li>
            <li onClick={this.list4.bind(this)} ref="zao">早餐</li>
            <li onClick={this.list5.bind(this)} ref="yu">鱼</li>
            <li onClick={this.list6.bind(this)} ref="age">鸡蛋</li>
            <li onClick={this.list7.bind(this)} ref="tang">汤羹</li>
            <li onClick={this.list8.bind(this)} ref="hong">洪培</li>
            <li onClick={this.list9.bind(this)} ref="zhu">主食</li>
            <li onClick={this.list10.bind(this)} ref="mian">面 </li>
            <li onClick={this.list11.bind(this)} ref="su">素食</li>
          </ul>
        </div>
        
    </div>
    )
  }
}

export default Com;